import {createElement, findDOMNode, Component} from 'rax';
import Touchable from 'rax-touchable';

import Nav from './../nav/index';

const tabHeaderStyles = {
    boxStyle: {
      width: 750,
    },
    scrollStyle: {
      width: 750,
    },
  };
  
export default class TabHeader extends Component {
    constructor(props) {
      super(props);
    }
  
    renderItem(item, index) {
      const { mds, onClickHot = () => {} } = this.props;
      const { itemBack, itemCover } = item;
      const {
        selected,
        height,
        itemHeight,
        itemWidth,
        itemPadding,
        clickItem = () => {},
      } = this.props;
      const spmdId = index + 1;
      const spmd = `${mds.moduleName}_${mds.widgetId}_${spmdId}`;
  
      const touchProps = {
        key: `touch_${index}`,
        style: {
          width: itemWidth,
          height: itemHeight,
          marginLeft: index ? itemPadding : 0,
          marginTop: (height - itemHeight) / 2,
        },
        'data-spmd': spmd,
        onPress: () => {
          // console.log(item.url);
          // onClickHot(item.url);
          clickItem(item, index);
        }
      };
      const backProps = {
        source: {
          uri: selected === index ? itemCover : itemBack,
          // uri: itemBack,
        },
        style: {
          width: itemWidth,
          height: itemHeight,
        },
        lazyload: true,
        resizeMode: 'cover',
      };

      return (
        <Touchable {...touchProps}>
          <Picture {...backProps}/>
        </Touchable>
      );
    }
  
    render() {
      const {
        height,
        items,
      } = this.props;
      // console.log(itemHeight, itemWidth, itemPadding, items);
  
      const scrollProps = {
        horizontal: true,
        showsVerticalScrollIndicator: false,
        showsHorizontalScrollIndicator: false,
        style: {
          height,
          ...tabHeaderStyles.scrollStyle,
        },
      };
      return (
        <View style={{
          height,
          ...tabHeaderStyles.boxStyle,
        }}>
          <ScrollView {...scrollProps}>
            {
              items.map((item, index) => this.renderItem(item, index))
            }
          </ScrollView>
        </View>
      );
    }
  }
  